<template>
	<view>
		<view class="list">
			<picker class="picker" mode="multiSelector" :range="region" range-key="value" :value="regionIndex"
				@change="pickerChange" @columnchange="pickerColumnchange">
				<view class="pbox" :class="{'pbox_hover':regionStr != '选择城市'}">
					<view class="texts">{{regionStr}}</view>
				</view>
			</picker>
			<uni-icons @click.stop="close" style="margin-left: 15rpx;" v-if="regionStr != '选择城市' &&isClose" type="clear" size="20"></uni-icons>
			<image v-if="regionStr == '选择城市'" class="imgs" src="/static/down.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	// import region from '@/common/ChinaCitys.json';
	import {
		getArea
	} from '@/common/http.api.js';
	export default {
		props: {
			isClose:{
				type:Boolean,
				default:true
			},
			citylist: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				// 原数组
				oldRegion: [],
				// 处理后的数组
				region: [
					[],
					[],
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0],
				// 省市区字符串
				regionStr: '选择城市',
				previnceId:'北京',
				cityId: '北京市',
			};
		},
		created() {
			getArea().then(res=>{
				this.oldRegion = res.data
				console.log('222222222222222');
				if(this.citylist.length!=0){
					console.log('11111111');
					this.previnceId = this.citylist[0]
					this.cityId = this.citylist[1]
					this.regionStr = this.citylist[0]+'/'+this.citylist[1]
					console.log(this.previnceId,this.cityId,'11111111');
				}else{
					this.regionStr = '选择城市'
				}
				let provinceArr = [];
				let cityArr = [];
				this.oldRegion.map((item, index) => {
					this.region[0].push({
						value: item.value,
						code: item.code
					});
					if (this.previnceId == item.value) {
						provinceArr = item.children;
						this.regionIndex[0] = index;
					}
				})
				provinceArr.map((item, index) => {
					this.region[1].push({
						value: item.value,
						code: item.code
					});
					if (this.cityId == item.value) {
						cityArr = item.children;
						this.regionIndex[1] = index;
					}
				})
				console.log(this.regionIndex);
				// cityArr.map((item, index) => {
				// 	this.region[2].push({
				// 		value: item.value,
				// 		code: item.code
				// 	});
				// 	if (this.countyId == item.code) {
				// 		this.regionIndex[2] = index;
				// 	}
				// })
			})
			
		},
		methods: {
			close(){
				this.regionStr = '选择城市'
				this.$emit('regionStr', this.regionStr)
			},
			pickerChange(e) {
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].value + '/' + this.region[1][this.regionIndex[1]]
					.value
				// 组件传值
				this.$emit('regionStr', this.regionStr)
			},
			pickerColumnchange(e) {
				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							value: item.value,
							code: item.code
						});
					})
					this.$set(this.region, 1, cityArr);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			}
		},

	}
</script>

<style lang="scss">
	.imgs{
		width: 16rpx;
		height: 16rpx;
		margin-left: 15rpx;
	}
	.list {
		width: 100%;
		display: flex;
		align-items: center;
		.picker {
			width: 100%;
			.pbox {
				display: flex;
				align-items: center;
				color: #000000;
				box-sizing: border-box;
				border-radius: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				
			}
			.texts{
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.pbox_hover {
				color: #000000;
			}
		}
	}
</style>